<template>
    <div class="ex-detail" v-if="pressContact">
        <div class="em-title">
            <p>Press contacts</p>
        </div>
        <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
        <div class="ep-content">
            <div class="epc-card">
                <div class="epc-left">
                    <div class="epc-left-img">
                        <img :src="pressContact.thumbnailUrl">
                    </div>
                    <div class="epc-left-name">{{pressContact.name}}</div>
                    <div class="epc-left-position">{{pressContact.title}}</div>
                </div>
                <div class="epc-mid">
                </div>
                <div class="epc-right">
                    <div class="epc-right-title">Contact information</div>
                    <div class="epc-right-line">
                        <img src="/images/icon/phone.png"/>
                        <p>{{pressContact.phone}}</p>
                    </div>
                    <div class="epc-right-line">
                        <img src="/images/icon/fax.png"/>
                        <p>{{pressContact.fax}}</p>
                    </div>
                    <div class="epc-right-line">
                        <img src="/images/icon/email.png"/>
                        <p>{{pressContact.email}}</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script setup lang="ts">

    import {ref} from "vue";

    const props = defineProps({
        data: {
            type: Object,
            required: true,
        },
    });

    const pressContact = props.data ? ref(props.data) : ref(undefined);
</script>
<style scoped lang="scss">
    .ex-detail {
        position: relative;
        /*padding: 0px 0px;*/
        margin-left: 260px;
        background: #fff;
        width: 1400px;
        height: 680px;
        padding-top: 100px;
        border-top: 1px solid rgba(0, 0, 0, 0.25);


        .em-title {
            // margin-top: 100px;
            font-size: 56px;
            color: #000;
            font-weight: 600;
            // margin-bottom: 112px;
            width: 100%;
            text-align: center;
        }

        .ep-content {
            // width: 1720px;
            // margin-bottom: 10px;
            padding: 100px 205px;

            .epc-card {
                overflow: hidden;
                display: inline-flex;
                height: 280px;

                .epc-left {
                    width: 350px;
                    // padding: 0 160px;
                    padding-left: 155px;

                    .epc-left-img {
                        width: 185px;
                        height: 185px;
                        background: #EAEAEB;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 185px;
                            height: 185px;
                            object-fit: cover;
                            transition: all 0.6s;
                        }
                    }

                    .epc-left-name {
                        position: relative;
                        text-align: center;
                        width: 351px;
                        height: 30px;
                        margin-top: 25px;
                        font-size: 20px;
                        font-weight: 700;
                        color: #30363A;
                        left: -83px;
                    }

                    .epc-left-position {
                        text-align: center;
                        position: relative;
                        width: 351px;
                        height: 30px;
                        margin-top: 20px;
                        font-size: 16;
                        color: #30363A;
                        left: -83px;
                    }

                }

                .epc-mid {
                    width: 0px;
                    border-right: 1px solid rgba(0, 0, 0, 0.15);
                }

                .epc-right {
                    width: 505px;
                    margin-left: 160px;

                    .epc-right-title {
                        height: 60px;
                        line-height: 60px;
                        font-size: 22px;
                        font-weight: 700;
                        color: #30363A;
                        margin-top: 20px;
                    }

                    .epc-right-line {
                        width: 360px;
                        height: 56px;
                        padding: 8px 0;
                        display: inline-flex;

                        img {
                            width: 40px;
                            height: 40px;
                            border: 2px dashed rgba(0, 0, 0, 0.2);
                        }

                        p {
                            height: 40px;
                            margin-left: 16px;
                            line-height: 40px;
                            font-size: 20px;
                        }
                    }
                }

            }

            .epc-card:hover .epc-img img {
                transform: scale(1.05);
            }

        }


    }

</style>
